<template>
  <div id="app">
    <Head>选择分类</Head>
    <div class="tisp">
        所发布的信息必须真实、准确，不得发布违法、违规、虚假、欺诈、涉黄等信息，禁止发布微商、信贷、办卡、刷单等违规信息。一经发现，直接删除。
    </div>
    <div class="menu clearfix">
      <div class="item" v-for="(item, index) in menu" :key="index" @click="onSelpro(index,item.title)">
        <div v-if="item.children.length > 0">
          <img v-if="!item.logo_url&&item.id=='1'" src="../../../assets/images/cityinfo/class/class_1.png" />
          <img v-if="!item.logo_url&&item.id=='8'" src="../../../assets/images/cityinfo/class/class_8.png" />
          <img v-if="!item.logo_url&&item.id=='13'" src="../../../assets/images/cityinfo/class/class_13.png" />
          <img v-if="!item.logo_url&&item.id=='18'" src="../../../assets/images/cityinfo/class/class_18.png" />
          <img v-if="!item.logo_url&&item.id=='22'" src="../../../assets/images/cityinfo/class/class_22.png" />
          <img v-if="!item.logo_url&&item.id=='30'" src="../../../assets/images/cityinfo/class/class_30.png" />
          <img v-if="!item.logo_url&&item.id=='34'" src="../../../assets/images/cityinfo/class/class_34.png" />
          <img v-if="!item.logo_url&&item.id=='38'" src="../../../assets/images/cityinfo/class/class_38.png" />
          <img v-if="!item.logo_url&&item.id=='48'" src="../../../assets/images/cityinfo/class/class_48.png" />
          <img v-if="!item.logo_url&&item.id=='60'" src="../../../assets/images/cityinfo/class/class_60.png" />
          <img v-if="item.logo_url" :src="item.logo_url" />
          <div class="name">{{item.title}}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
        <van-picker
            :title="title"
            show-toolbar
            :columns="prolist"
            @confirm="onConfirm"
            @cancel="show = false"
        />
    </van-popup>
  </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'

export default {
  components: {},
  data () {
    return {
      show: false,
      title: '',
      menu: [],
      prolist: []
    }
  },
  created () {
    // 请求所有项目
    this.class()
  },
  methods: {
    class () {
      http.get(api.city_selclass)
        .then(res => {
          this.menu = [...res.data]
        }).catch(() => {})
    },
    onSelpro (index, value) {
      this.title = value
      this.prolist = this.menu[index].children
      this.prolist = this.prolist.map(function (item) {
        return { id: item.id, text: item.title }
      })
      this.show = true
    },
    onConfirm (value) {
      this.$router.push({
        path: '/cityinfo/release/',
        query: {
          classid: value.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tisp{
  margin-top: 19px;
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 3px;
  border: 1px solid #ffcdb1;
  background-color: #fdf6e6;
  font-size: 12px;
  color: #eb5e00;
  line-height: 1.5;
  padding: 10px 8px;
}
.menu {
  margin-top: 15px;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
  flex-wrap: wrap;
  .item {
    flex: 0 0 25%;
    margin-top: 20px;
    text-align: center;
    position: relative;
    img {
      width: 50px;
      height: 50px;
    }
    .name {
      line-height: 1;
      font-size: 13px;
      color: #444444;
    }
  }
}
</style>
